import React,{ useState, useEffect, useLayoutEffect } from 'react'
import axios from 'axios';
import '../../static/iconfont.css'
import './detail.css'
import Swiper1 from '../../component/swiper/Swiper';
import { Anchor, Skeleton  } from 'antd';
export default function Detail(props) {
    let [detail,setDetail] = useState([])
    let { id } = props.match.params
    // console.log(id);
    let [ text,setText ] = useState([])
    let [ img,setImg ] = useState([])
    useEffect( () => {
      axios.get(`/api/comment/open/v1/preview?spu_id=${ id.length > 8 ? id.slice(0,7) : id }`).then(res => {
        setText([res.data.data.list[0]])
      })
      axios.get(`/api/product/skus?ids=${id}`).then(res => {
          // console.log(res.data.data.list[0].shop_info.tpl_content.base.images.goods_view_mobile);
          setDetail([res.data.data.list[0]])
          setImg(res.data.data.list[0].shop_info.tpl_content.base.images.goods_view_mobile)
        })
        
    },[])
    // console.log(id);
    // console.log(detail);
  return (
    <div>
    { detail.length > 0 && <div className='dbx'>
         {
          detail.map((item,index) => {
            return <div key={index}>
              <div className='top'>
                <span className='back' onClick={()=>props.history.go(-1)}><i className="iconfont icon-s-zuojiantou" /></span>
                <span className='title'>{item.shop_info.title}</span> 
              </div>
          <Anchor
            className='tz'
            direction="horizontal"
            items={[
              {
                key: 'part-1',
                href: '#part-1',
                title: '商品',
              },
              {
                key: 'part-2',
                href: '#part-2',
                title: '评价',
              },
              {
                key: 'part-3',
                href: '#part-3',
                title: '详情',
              },
              {
                key: 'part-4',
                href: '#part-4',
                title: '推荐',
              }
            ]}
          />
          <div className='box'>
          <div
          id="part-1">
              <div className='banner'>
                {detail[0].shop_info.ali_images.length > 0 && <Swiper1 banner={detail[0].shop_info.ali_images}></Swiper1>}
              </div>
              <div className='con'>
                <p className='price'>￥{(item.price).toFixed(2)}</p>
                <h4>{item.shop_info.title}</h4>
                <p className='xtext'>{item.shop_info.sub_title}</p>
              </div>
              <div className='con1'>
                <p className='tit'>已选版本</p>
                <p><span>颜色:</span> <b>浅黑色</b></p>
                <p><span>容量:</span> <b>8G + 128GB</b></p>
                <p>数量: <b>1</b> </p>
              </div>
              <div className='con2'>
                <div className='tit'>服务说明</div>
                <div>
                  <span>7天无理由退货</span>
                  <span>15天质量问题换发</span>
                </div>
              </div>
              
          </div>
          <div
            id="part-2">
              <div className='con3'>
                <div className='t'>
                  <span>用户评价</span>
                  <span className='sl'>(5555)</span>
                  <span>查看全部 &gt;</span>
                </div>
                  {
                    text.map((item,index)=>{
                      return <div key={index} className='x'>
                        <div className='tel'>{item.phone}</div>
                        <div className='pl'>{item.content}</div>
                      </div>
                    })
                  }
              </div>
            </div>
          <div
            id="part-3">
              {
                img.map((item,index) => {
                  return <div key={index}>
                      <img src={item. url} alt="" className='imgs' />
                  </div>
                })
              }
            </div>
          <div
            id="part-4"></div>
          </div>
          <div className='foot'>
                <span className='dh'>到货通知</span>
              </div>
          </div>
        })}
    </div> }
    </div>
  )
}
  